<template>

  <div id='racelist'>
    <drawer :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#35495e', width: '200px'}" style="height:100vh">

      <div slot="drawer">
        1111
      </div>

      <view-box ref="viewBox" style="height:100%;">
        <x-header style="color:white" title="use prop:title">
          <span slot="overwrite-title">汇跑赛事</span>
          <img style="width: 55px" slot="overwrite-left" src="//r3.ihuipao.cn/site/2018/ihuipao/web/ihuipao/index/fir/img/logo1.png" alt="">
          <span @click="drawerVisibility = !drawerVisibility" slot="right">
            <i class="fa fa-user"></i>
          </span>
        </x-header>

        <search style="position:relative" placeholder="按城市或者赛事名称搜索" v-model="value" position="relative" :auto-fixed="false" auto-scroll-to-top top="46px" @on-submit="search({type:'name'})" ref="search"></search>

        <flexbox style="display:none" class="selection">
          <flexbox-item @click.native="toggle($event,0)" class="needsclick">
            <div class="flex-demo class">分类
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,1)">
            <div class="flex-demo data">日期
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,2)">
            <div class="flex-demo region">地区
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,3)">
            <div class="flex-demo screening">筛选
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>
          <div class="wrapper">
            <div>
              <ul>

                <li>
                  <group>
                    <cell @click.native="search({type:'type',name:'',label:'分类'})" :border-intent="false" title="不限"></cell>
                    <cell @click.native="search({type:'type',name:'marathon',label:'全程马拉松'})" :border-intent="false" title="全程马拉松"></cell>
                    <cell @click.native="search({type:'type',name:'half',label:'半程马拉松'})" :border-intent="false" title="半程马拉松"></cell>
                    <cell @click.native="search({type:'type',name:'10km',label:'10公里跑'})" :border-intent="false" title="10公里跑"></cell>
                    <cell @click.native="search({type:'type',name:'happyrun',label:'欢乐跑'})" :border-intent="false" title="欢乐跑"></cell>
                    <cell @click.native="search({type:'type',name:'ultramarathon',label:'超级马拉松'})" :border-intent="false" title="超级马拉松"></cell>
                    <cell @click.native="search({type:'type',name:'longtrail',label:'100公里以上级越野赛'})" :border-intent="false" title="100公里以上级越野赛"></cell>
                    <cell @click.native="search({type:'type',name:'100km',label:'100公里级越野赛'})" :border-intent="false" title="100公里级越野赛"></cell>
                    <cell @click.native="search({type:'type',name:'50km',label:'50公里级越野赛'})" :border-intent="false" title="50公里级越野赛"></cell>
                    <cell @click.native="search({type:'type',name:'marathontrail',label:'山地马拉松'})" :border-intent="false" title="山地马拉松"></cell>
                    <cell @click.native="search({type:'type',name:'trailrunning',label:'短距离越野赛'})" :border-intent="false" title="短距离越野赛"></cell>
                    <cell @click.native="search({type:'type',name:'other',label:'其他'})" :border-intent="false" title="其他"></cell>
                  </group>
                </li>

                <li class="date">
                  <div>
                    <div class="data-box">
                      <div @click="chooseDate" class="data-left vux-1px-t vux-1px-b">
                        <div @click="search({type:'pasttime',name:'',label:'日期'})" class="vux-1px-b">不限</div>
                        <div @click="search({type:'pasttime',name:'past_years',label:'近一年'})" class="vux-1px-b">近一年</div>
                        <div @click="search({type:'pasttime',name:'past_months',label:'近一月'})" class="vux-1px-b">近一月</div>
                        <div @click="search({type:'pasttime',name:'past_weeks',label:'近一周'})" class="vux-1px-b">近一周</div>
                        <div class="vux-1px-b">年</div>
                      </div>
                      <div style="display:block" class="data-right vux-1px"></div>
                      <div style="display:none" class="data-right vux-1px">
                        <div style="display: flex;overflow:scroll;height:150px">
                          <div style="flex:1">
                            <p class="vux-1px-b" @click="search({type:'pasttime',name:'2015',label:'2015'})" style="text-align:center">2015</p>
                            <p class="vux-1px-b" @click="search({type:'pasttime',name:'2016',label:'2016'})" style="text-align:center">2016</p>
                            <p class="vux-1px-b" @click="search({type:'pasttime',name:'2017',label:'2017'})" style="text-align:center">2017</p>
                            <p class="vux-1px-b" @click="search({type:'pasttime',name:'2018',label:'2018'})" style="text-align:center">2018</p>
                            <p class="vux-1px-b" @click="search({type:'pasttime',name:'2019',label:'2019'})" style="text-align:center">2019</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>

                <li class="area">
                  <div class="">

                    <flexbox class="vux-1px-t vux-1px-b">
                      <flexbox-item @click.native="toggleArea($event,0)">
                        <div>热门</div>
                      </flexbox-item>
                      <flexbox-item @click.native="toggleArea($event,1)">
                        <div>国内</div>
                      </flexbox-item>
                      <flexbox-item @click.native="toggleArea($event,2)">
                        <div>国外</div>
                      </flexbox-item>
                    </flexbox>

                    <ul class="vux-1px-b">
                      <li style="display:block">
                        <div>
                          <span @click="search({type:'area',area:'',province:'',city:'',label:'地区'})">不限</span>
                          <span @click="search({type:'area',area:'001',province:'310000',label:'上海'})">上海</span>
                          <span @click="search({type:'area',area:'001',province:'110000',label:'北京'})">北京</span>
                          <span @click="search({type:'area',area:'001',province:'440000',city:'440100',label:'广州'})">广州</span>
                          <span @click="search({type:'area',area:'001',province:'440000',city:'440100',label:'成都'})">成都</span>
                          <span @click="search({type:'area',area:'001',province:'330000',city:'330100',label:'杭州'})">杭州</span>
                          <span @click="search({type:'area',area:'001',province:'210000',city:'210100',label:'沈阳'})">沈阳</span>
                          <span @click="search({type:'area',area:'001',province:'420000',city:'420100',label:'武汉'})">武汉</span>
                          <span @click="search({type:'area',area:'001',province:'350000',city:'350200',label:'厦门'})">厦门</span>
                          <span @click="search({type:'area',area:'001',province:'500000',label:'重庆'})">重庆</span>
                          <span @click="search({type:'area',area:'001',province:'320000',city:'320500',label:'苏州'})">苏州</span>
                          <span @click="search({type:'area',area:'001',province:'320000',city:'320100',label:'南京'})">南京</span>
                          <span @click="search({type:'area',area:'001',province:'610000',city:'610100',label:'西安'})">西安</span>
                          <span @click="search({type:'area',area:'164',label:'日本'})">日本</span>
                          <span @click="search({type:'area',area:'001',province:'001081',label:'香港'})">香港</span>
                          <span @click="search({type:'area',area:'001',province:'001071',label:'台湾'})">台湾</span>
                          <span @click="search({type:'area',area:'134',label:'美国'})">美国</span>
                          <span @click="search({type:'area',area:'230',label:'英国'})">英国</span>
                        </div>
                      </li>

                      <li>
                        <div>
                          <span @click="search({type:'area',area:'001',label:'国内'})">全部</span>
                          <span @click="search({type:'area',area:'001',province:'110000',label:'北京'})">北京市</span>
                          <span @click="search({type:'area',area:'001',province:'120000',label:'天津市'})">天津市</span>
                          <span @click="search({type:'area',area:'001',province:'310000',label:'上海'})">上海市</span>
                          <span @click="search({type:'area',area:'001',province:'320000',label:'江苏省'})">江苏省</span>
                          <span @click="search({type:'area',area:'001',province:'330000',label:'浙江省'})">浙江省</span>
                          <span @click="search({type:'area',area:'001',province:'440000',label:'广东省'})">广东省</span>
                          <span @click="search({type:'area',area:'001',province:'230000',label:'黑龙江省'})">黑龙江省</span>
                          <span @click="search({type:'area',area:'001',province:'220000',label:'吉林省'})">吉林省</span>
                          <span @click="search({type:'area',area:'001',province:'210000',label:'辽宁省'})">辽宁省</span>
                          <span @click="search({type:'area',area:'001',province:'340000',label:'安徽省'})">安徽省</span>
                          <span @click="search({type:'area',area:'001',province:'350000',label:'福建省'})">福建省</span>
                          <span @click="search({type:'area',area:'001',province:'620000',label:'甘肃省'})">甘肃省</span>
                          <span @click="search({type:'area',area:'001',province:'450000',label:'广西壮族自治区'})">广西壮族自治区</span>
                          <span @click="search({type:'area',area:'001',province:'520000',label:'贵州省'})">贵州省</span>
                          <span @click="search({type:'area',area:'001',province:'460000',label:'海南省'})">海南省</span>
                          <span @click="search({type:'area',area:'001',province:'130000',label:'河北省'})">河北省</span>
                          <span @click="search({type:'area',area:'001',province:'410000',label:'河南省'})">河南省</span>
                          <span @click="search({type:'area',area:'001',province:'420000',label:'湖北省'})">湖北省</span>
                          <span @click="search({type:'area',area:'001',province:'430000',label:'湖南省'})">湖南省</span>
                          <span @click="search({type:'area',area:'001',province:'360000',label:'江西省'})">江西省</span>
                          <span @click="search({type:'area',area:'001',province:'530000',label:'云南省'})">云南省</span>
                          <span @click="search({type:'area',area:'001',province:'500000',label:'重庆市'})">重庆市</span>
                          <span @click="search({type:'area',area:'001',province:'630000',label:'青海省'})">青海省</span>
                          <span @click="search({type:'area',area:'001',province:'370000',label:'山东省'})">山东省</span>
                          <span @click="search({type:'area',area:'001',province:'140000',label:'山西省'})">山西省</span>
                          <span @click="search({type:'area',area:'001',province:'610000',label:'陕西省'})">陕西省</span>
                          <span @click="search({type:'area',area:'001',province:'510000',label:'四川省'})">四川省</span>
                          <span @click="search({type:'area',area:'001',province:'150000',label:'内蒙古自治区'})">内蒙古自治区</span>
                          <span @click="search({type:'area',area:'001',province:'640000',label:'宁夏回族自治区'})">宁夏回族自治区</span>
                          <span @click="search({type:'area',area:'001',province:'540000',label:'西藏自治区'})">>西藏自治区</span>
                          <span @click="search({type:'area',area:'001',province:'650000',label:'新疆维吾尔族自治区'})">新疆维吾尔族自治区</span>
                          <span @click="search({type:'area',area:'001',province:'001081',label:'香港'})">香港</span>
                          <span @click="search({type:'area',area:'001',province:'001082',label:'澳门'})">澳门</span>
                          <span @click="search({type:'area',area:'001',province:'001071',label:'台湾'})">台湾</span>
                        </div>
                      </li>

                      <li>
                        <div>
                          <!-- <span @click="search({type:'area',area:'',label:'国外'})">全部</span> -->
                          <span @click="search({type:'area',area:'134',label:'美国'})">美国</span>
                          <span @click="search({type:'area',area:'164',label:'日本'})">日本</span>
                          <span @click="search({type:'area',area:'231',label:'英国'})">英国</span>
                          <span @click="search({type:'area',area:'050',label:'德国'})">德国</span>
                          <span @click="search({type:'area',area:'058',label:'法国'})">法国</span>
                          <span @click="search({type:'area',area:'228',label:'意大利'})">意大利</span>
                        </div>
                      </li>

                    </ul>

                  </div>
                </li>

                <li class="screen">
                  <group>
                    <cell @click.native="search({type:'racesort',name:'',label:'筛选'})" :border-intent="false" title="重置"></cell>
                    <cell @click.native="search({type:'racesort',name:'time',label:'按时间排序'})" :border-intent="false" title="按时间排序"></cell>
                    <cell @click.native="search({type:'racesort',name:'popular',label:'按人气排序国外'})" :border-intent="false" title="按人气排序"></cell>
                  </group>
                  <!-- <div style="text-align: center">
                    <div style="display: inline-block">
                      <x-button mini type="default">重置</x-button>
                      <x-button mini type="primary">确定</x-button>
                    </div>
                  </div> -->
                </li>

              </ul>
            </div>

          </div>

        </flexbox>

        <div>

          <divider>赛事列表</divider>
          <scroller @on-scroll='scroll' style="top:0px" :scroll-bottom-offset='0' lock-x scrollbar-y height="-175" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
            <div>

              <ul slot="content" class="racelist">
                <li @click="goLink('signup',item.id)" v-for="(item,index) in list" :key="index" class='clearfix'>
                  <div class='header'>
                    <div class='name'> {{item.name}} </div>
                    <div class="status">{{item.msg}}</div>
                  </div>
                  <div class='content'>
                    <div class="content-left">
                      <img @load='reset' :src='item.logo' alt="">
                    </div>

                    <div class="content-right">
                      <div class='message'>
                        <p>赛事时间：{{item.date}}</p>
                        <p>赛事地点：{{item.address_name}}{{item.address}}</p>
                        <p>赛事类型：{{item.typeMessage}}</p>
                        <x-button type="primary" mini>立即报名</x-button>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>

              <!--
              <card v-for="(item,index) in list" :key="index">
                <div slot="content" style="padding: 0px;" class="card-padding">
                  <div class="flexwrapper">
                    <flexbox orient="vertical" :gutter="0" wrap="wrap">
                      <flexbox-item align='center'>
                        <div @click="goLink('signup',item.id)" class="flex-demo">
                          <div class="needsclick">

                            
                            <img @load='reset' class="needsclick logo" :src='item.logo' alt="">
                          </div>
                          <div class="content needsclick">
                            
                            <p class="title">{{item.name}}</p>
                            <div class="info">
                              <span>
                                <i class="fa fa-calendar"></i> {{item.date}}</span>
                              <i class="fa fa-map-marker"></i>
                              <span>{{item.address_name}}{{item.address}}</span>
                            </div>
                          </div>
                        </div>
                      </flexbox-item>
                    </flexbox>
                    
                  </div>
                </div>
              </card>
              -->

            </div>

            <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
              <span v-show="demo4Value.pullupStatus === 'default'"></span>
              <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
              <span v-show="demo4Value.pullupStatus === 'loading'">
                <spinner type="ios-small"></spinner>
              </span>
            </div>

            <div v-if='stop' class="nomore"></div>

          </scroller>

          <!-- <card :header="{title:'' }">
              <div slot="content" class="card-padding">
                <scroller style="top:0px" :bounce='false' :scroll-bottom-offset='0' lock-x scrollbar-y height="-185" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
                  <div class="flexwrapper">
                    <flexbox orient="vertical" :gutter="0" wrap="wrap">
                      <flexbox-item v-for="(item,index) in list" :key="index" align='center'>
                        <div @click="goLink('signup',item.id)" class="vux-1px flex-demo">
                          <div class="needsclick">
                            <img class="needsclick logo" :src='item.header||"http://stor.ihuipao.cn/image/98dd5199b5eacd3e37ae483e75d6c5e5.jpg"' alt="">
                          </div>
                          <div class="content needsclick">
                            <p class="title">{{item.name}}</p>
                            <div class="info">
                              <span>
                                <i class="fa fa-calendar"></i> {{item.date}}</span>
                              <i class="fa fa-map-marker"></i>
                              <span>{{item.country_name}}{{item.city_name}}{{item.address}}</span>
                            </div>
                          </div>
                        </div>
                      </flexbox-item>
                    </flexbox>
                    <div @click="modal" class="modal"></div>

                  </div>
                  <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
                    <span v-show="demo4Value.pullupStatus === 'default'"></span>
                    <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
                    <span v-show="demo4Value.pullupStatus === 'loading'">
                      <spinner type="ios-small"></spinner>
                    </span>
                  </div>
                  <div v-if='stop' class="nomore"></div>
                </scroller>
              </div>
            </card> -->

          <!-- <circle-menu type="top" :number='3' mask='black' btn circle>
            <a slot="item_1" class="fa fa-twitter fa-lg"></a>
            <a slot="item_2" class="fa fa-weixin fa-lg"></a>
            <a slot="item_3" class="fa fa-weibo fa-lg"></a>
          </circle-menu> -->

        </div>

        <myFooter :page="pageConfig"></myFooter>
      </view-box>
      <div @click="modal" class="modal"></div>

    </drawer>

  </div>

</template>


<script type="text/ecmascript-6">
//import VConsole from 'vconsole/dist/vconsole.min.js'
//let vConsole = new VConsole()

/* eslint-disable*/

import {
  timeFormat,
  isIdNumber,
  setTitle,
  dateStringToDateTime,
  formatCity
} from "@/common/js/main.js";

const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import myFooter from "@/common/components/myfooter.vue";

//import {host} from "@/api/config";
//let host = "http://jiangtao.v3.ihuipao.com/";

import {
  Divider,
  Card,
  Panel,
  XHeader,
  Search,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  ViewBox,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Scroller,
  Spinner,
  Flexbox,
  Drawer,
  FlexboxItem,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import CircleMenu from "vue-circle-menu";

import { cityData } from "@/common/locales/cityData.js";
import { countryData } from "@/common/locales/countryData1.js";
import mixin from "@/common/js/mixin";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      raceList: [],
      showMore: true,
      type: "5",
      config: {
        perpage: 5, //分页数量
        page: 1, //当前页数
        hasmorepage: false //是否还有分页
      },
      searchConfig: {},
      showModeValue: "overlay",
      showPlacementValue: "right",
      stop: false,
      drawerVisibility: false,
      demo4Value: {
        pullupStatus: "default"
      },
      pageConfig: window.pageConfig,
      value: "",
      list: []
    };
  },
  computed: {},
  beforeCreate() {
    window.localStorage.setItem("pageType", "racelist");

    //cookie.set("_sid", _sid);
    // if (hostoperating() == "mini" || hostoperating() == "wx") {

    //   //如果是在微信或者小程序 直接登录

    //   let redirect = `${window.location.origin}${window.location.pathname}`;
    //   //alert(redirect)

    //   if (!!cookie.get("_sid")) {
    //     let _sid = cookie.get("_sid");
    //     //如果能抓取到sid
    //     window.location.href = `${host}auth/weixin/oauth?sid=${_sid}&redirect=${redirect}`;
    //   } else {
    //     function randomString(len) {
    //       len = len || 32;
    //       var $chars =
    //         "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678oOLl9gqVvUuI1"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
    //       var maxPos = $chars.length;
    //       var pwd = "";
    //       for (var i = 0; i < len; i++) {
    //         pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    //       }
    //       return pwd;
    //     }
    //     let _sid = randomString(40);

    //     cookie.set("_sid", _sid);
    //     //alert('跳转前_sid是'+cookie.get('_sid'))
    //     //console.log(`${host}auth/weixin/oauth?sid=${_sid}&redirect=${redirect}`)
    //     // this.axios
    //     //   .get(`${host}auth/weixin/oauth`, {
    //     //     params: {
    //     //       sid: _sid
    //     //     }
    //     //   })
    //     //   .then(response => {
    //     //     if (response.data.code == "200") {
    //     //       alert(response);
    //     //     } else {
    //     //       this.$vux.toast.show({
    //     //         type: "warn",
    //     //         text: response.data.msg
    //     //       });
    //     //     }
    //     //   });
    //     //let a = `http://ihuipao.cn/auth/weixin/oauth?sid=${_sid}`;
    //     //console.log(_sid)
    //     //console.log(redirect)
    //     //alert('_sid是'+cookie.get('_sid'))

    //     window.location.href = `${host}auth/weixin/oauth?sid=${_sid}&redirect=${redirect}`;
    //     return
    //   }
    // }
    setTitle("赛事列表");
  },
  created() {
    if (!!this.$route.query.race_id) {
      this.$router.push({ path: `/sign_up?race_id=${this.$route.query.race_id}` });
    }
    //console.log(this.$route.query._sid);

    if (
      window.localStorage.getItem("perpage") &&
      window.localStorage.getItem("raceList")
    ) {
      this.list = JSON.parse(window.localStorage.getItem("raceList"));
      this.config.perpage = window.localStorage.getItem("perpage") >> 0;
      var top = window.localStorage.getItem("scrollTop");
      //console.log(window.localStorage.setItem('scrollTop',a.top))
      setTimeout(function() {
        document.querySelector(
          ".xs-container"
        ).style.transform = `translateY(-${window.localStorage.getItem(
          "scrollTop"
        )}px) translateZ(0px)`;
      }, 0);

      //console.log(window.localStorage.getItem('raceList'))
    } else {
      this.getList();
    }

    //console.log(1);
    //console.log(window.localStorage.getItem('session_sid'))
  },
  mounted() {},
  methods: {
    scroll(a) {
      window.localStorage.setItem("scrollTop", a.top);
    },
    search(config) {
      this.config.perpage = 5;
      this.stop = false;
      this.raceList = [];
      document.querySelector(
        ".xs-container"
      ).style.transform = `translateY(-0px) translateZ(0px)`;
      switch (config.type) {
        case "type":
          //this.searchConfig = { type: config.name };
          this.searchConfig = Object.assign(this.searchConfig, {
            type: config.name
          });
          document.querySelector(".class").innerHTML = `${
            config.label
          }<i class="fa fa-sort-down"></i>`;
          break;
        case "pasttime":
          //this.searchConfig = { pasttime: config.name };
          this.searchConfig = Object.assign(this.searchConfig, {
            pasttime: config.name
          });
          document.querySelector(".data").innerHTML = `${
            config.label
          }<i class="fa fa-sort-down"></i>`;
          break;
        case "area":
          //this.searchConfig = { pasttime: config.name };
          let obj = {};
          if (!!config.area || config.area == "") {
            obj.area = config.area;
          }
          if (!!config.province || config.province == "") {
            obj.province = config.province;
          }
          if (!!config.city || config.city == "") {
            obj.city = config.city;
          }
          this.searchConfig = Object.assign(this.searchConfig, obj);
          document.querySelector(".region").innerHTML = `${
            config.label
          }<i class="fa fa-sort-down"></i>`;
          break;
        case "racesort":
          //this.searchConfig = { racesort: config.name };
          this.searchConfig = Object.assign(this.searchConfig, {
            racesort: config.name
          });
          document.querySelector(".screening").innerHTML = `${
            config.label
          }<i class="fa fa-sort-down"></i>`;
          break;
        case "name":
          this.$refs.search.setBlur();
          //this.searchConfig = { name: this.value };
          this.searchConfig = Object.assign(this.searchConfig, {
            name: this.value
          });
          break;

        default:
      }

      this.getList(this.searchConfig);

      this.$nextTick(() => {
        document.querySelector("#racelist .vux-card-content").style =
          "pointer-events: auto;";
        //this.$refs.scroller.reset();
      });
      this.modal();
    },
    reset() {
      //console.log(11)
      this.$refs.scroller.reset();
    },
    goLink(routerName, raceId) {
      let _this = this;
      indexedDB("raceId", "set", raceId, raceId, function() {
        window.raceId = raceId;
        _this.$router.push({ path: routerName, query: { race_id: raceId } });
      });
    },
    load4() {
      this.demo4Value.pullupStatus = "up";

      this.config.perpage += 5;

      this.getList(this.searchConfig);

      // this.$nextTick(() => {
      //   this.$refs.scroller.reset();
      // });
    },
    errorImg(index) {
      console.log(index);
      //.src="http://placeholder.qiniudn.com/70x70/3cc51f/ffffff"
    },
    getEventlist(item, index, raceResponse) {
      var _this = this;
      this.axios
        .post(
          `${window.host}race/events`,
          qs.stringify({
            raceid: item.id
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.eventList = response.data.data;
            //如果邀请码项目在报名的赛事中 可通过
            let startLength = 0;
            let endLength = 0;

            for (let i = 0; i < response.data.data.length; i++) {
              response.data.data[i].rate = response.data.data[i].price >> 0;
              //this.options3.push(response.data.data[i].id);
              if (
                window.localStorage.getItem("invitationEventId") &&
                window.localStorage.getItem("invitationEventId") ==
                  response.data.data[i].id
              ) {
                this.isDisabled = false;
                item.msg = "正在使用邀请码报名";
                break;
              }
              let timeDate = new Date().valueOf();
              let startDate =
                dateStringToDateTime(response.data.data[i].reg_begin) || null;
              let endDate =
                dateStringToDateTime(response.data.data[i].reg_end) || null;
              if (!!startDate && timeDate < startDate) {
                //还没开始
                startLength++;
              } else if (!!endDate && timeDate > endDate) {
                //已经结束
                endLength++;
              }
            }

            if (startLength == response.data.data.length) {
              item.msg = "报名未开始";
              item.isDisabled = true;
            } else if (endLength == response.data.data.length) {
              item.msg = "报名结束";
              item.isDisabled = true;
            } else {
              item.msg = "报名中";
              item.isDisabled = false;
            }

            this.isShowEvent = true;

            item.date =
              item.time.split(" ")[0] +
              " " +
              item.time.split(" ")[1].split(":")[0] +
              ":" +
              item.time.split(" ")[1].split(":")[1];
            if (!!item.city) {
              item.address_name = formatCity(item.city);
            }

            switch (item.type) {
              case "marathon":
                item.typeMessage = "全程马拉松";
                break;
              case "half":
                item.typeMessage = "半程马拉松";
                break;
              case "10km":
                item.typeMessage = "10公里跑";
                break;
              case "happyrun":
                item.typeMessage = "欢乐跑";
                break;
              case "ultramarathon":
                item.typeMessage = "超级马拉松";
                break;
              case "longtrail":
                item.typeMessage = "100公里以上级越野赛";
                break;
              case "100km":
                item.typeMessage = "100公里级越野赛";
                break;
              case "50km":
                item.typeMessage = "50公里级越野赛";
                break;
              case "marathontrail":
                item.typeMessage = "山地马拉松";
                break;
              case "trailrunning":
                item.typeMessage = "短距离越野赛";
                break;
              case "other":
                item.typeMessage = "其他";
                break;
              default:
            }

            //list.push(item)
            _this.raceList[index] = item;
            _this.raceList.push([]);
            _this.raceList.pop();

            _this.$set(_this, "list", _this.raceList);
            //alert(1)
            //console.log(_this.list);

            //储存 数据
            var saveList = JSON.stringify(_this.list);
            window.localStorage.setItem("raceList", saveList);

            var savePerpage = this.config.perpage;
            window.localStorage.setItem("perpage", savePerpage);

            if (_this.raceList.length >= raceResponse.data.data.total) {
              _this.stop = true;
            } else if (raceResponse.data.data.length == 0) {
              _this.stop = false;
            } else {
              _this.stop = false;
            }

            _this.$nextTick(() => {
              _this.$refs.scroller.reset();
            });

            _this.demo4Value.pullupStatus = "default";

            //console.warn(this.eventList)

            //console.log(this.msg);

            // response.data.data.map((item, index) => {
            //   if(window.localStorage.getItem('invitationEventId')&&window.localStorage.getItem('invitationEventId')==item.id){
            //       isDisabled=false
            //       return
            //   }
            //   if(!isDisabled){

            //   }
            //console.log(item.id)
            // //如果有一个项目不可报名
            // if (!item.reg_able) {
            //   this.isDisabled = true;
            //   return;
            // }
            // this.isDisabled = false;
            //  });
            //console.log(response.data.data)
            //response.data.data;
          }
        });
    },
    getList(config) {
      let _this = this;
      config = Object.assign({ perpage: this.config.perpage }, config);

      if (!!this.stop) {
        return;
      }

      axios.post(`${host}race/list`, qs.stringify(config)).then(
        response => {
          if (response.data.code == "200") {
            //console.log(response.data.data.list);

            response.data.data.list.forEach(function(item, index) {
              _this.raceList = [];
              _this.getEventlist(item, index, response);

              //            this.info.date0 = this.info.time.split(" ")[0];
              //this.info.date1 = this.info.time.split(" ")[1];
              /*
              item.date =
                item.time.split(" ")[0] +
                " " +
                item.time.split(" ")[1].split(":")[0] +
                ":" +
                item.time.split(" ")[1].split(":")[0];
              if (!!item.city) {
                item.address_name = formatCity(item.city);

                
              }


              switch (item.type) {
                case "marathon":
                  item.typeMessage = "全程马拉松";
                  break;
                case "half":
                  item.typeMessage = "半程马拉松";
                  break;
                case "10km":
                  item.typeMessage = "10公里跑";
                  break;
                case "happyrun":
                  item.typeMessage = "欢乐跑";
                  break;
                case "ultramarathon":
                  item.typeMessage = "超级马拉松";
                  break;
                case "longtrail":
                  item.typeMessage = "100公里以上级越野赛";
                  break;
                case "100km":
                  item.typeMessage = "100公里级越野赛";
                  break;
                case "50km":
                  item.typeMessage = "50公里级越野赛";
                  break;
                case "marathontrail":
                  item.typeMessage = "山地马拉松";
                  break;
                case "trailrunning":
                  item.typeMessage = "短距离越野赛";
                  break;
                case "other":
                  item.typeMessage = "其他";
                  break;
                default:
              }

              if (item.header == null || item.header == "") {
                item.header = item.footer;
              }
              */
            });

            //console.log(countryData)

            //_this.list = response.data.data.list;
            //console.log(response.data.data.list);

            //_this.list=response.data.data.list
            //console.log(_this.list)

            _this.$set(_this, "list", response.data.data.list);

            //储存 数据
            var saveList = JSON.stringify(_this.list);
            window.localStorage.setItem("raceList", saveList);

            var savePerpage = this.config.perpage;
            window.localStorage.setItem("perpage", savePerpage);

            if (this.list.length >= response.data.data.total) {
              this.stop = true;
            } else if (response.data.data.length == 0) {
              this.stop = false;
            } else {
              this.stop = false;
            }

            this.$nextTick(() => {
              this.$refs.scroller.reset();
            });

            _this.demo4Value.pullupStatus = "default";
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    modal() {
      let flexItems = document.querySelectorAll(".selection .flex-demo");
      //let flexItem = document.querySelectorAll('.flex-demo')[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      [].forEach.call(flexItems, function(item, index) {
        item.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      });
    },
    chooseDate(e) {
      //console.log(e.target)

      if (e.target.innerHTML == "年") {
        document.querySelectorAll(".data-right")[0].style.display = "none";
        document.querySelectorAll(".data-right")[1].style.display = "block";
      } else {
        document.querySelectorAll(".data-right")[1].style.display = "none";
        document.querySelectorAll(".data-right")[0].style.display = "block";
      }
    },
    toggle(e, index) {
      let flexItems = document.querySelectorAll(".selection .flex-demo");

      let flexItem = document.querySelectorAll(".flex-demo")[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      if (flexItem.querySelector("i").className.indexOf("fa-sort-down") != -1) {
        [].forEach.call(flexItems, function(item, index) {
          item.querySelector("i").className = "fa fa-sort-down";
          lists[index].style.display = "none";
        });
        flexItem.querySelector("i").className = "fa fa-sort-up";
        lists[index].style.display = "block";
        document.querySelector("#app .modal").style.display = "block";
        document.querySelector("#racelist .vux-card-content").style =
          "pointer-events: none;";
      } else if (
        flexItem.querySelector("i").className.indexOf("fa-sort-up") != -1
      ) {
        flexItem.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
        document.querySelector("#racelist .vux-card-content").style =
          "pointer-events: atuo;";
      }
    },
    toggleArea(e, index) {
      let area = document.querySelector(".area");
      //e.target.style.color='red';

      [].forEach.call(area.querySelectorAll("ul li"), function(item, index) {
        item.style.display = "none";
      });

      area.querySelectorAll("ul li")[index].style.display = "block";
      //console.log(index)
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Divider,
    Card,
    Panel,
    XHeader,
    Search,
    myFooter,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    ViewBox,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Drawer,
    Scroller,
    Spinner,
    CircleMenu,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#racelist .weui-panel {
  background: #fcf9fe;
}

#racelist .flex-demo {
  background: #fff;
}

#racelist .flexwrapper {
  .flex-demo {
    width: 100%;
    background-clip: padding-box;
    margin-top: 0px;
    padding-bottom: 10px;
    img {
      width: 100%;
    }
  }
  .content {
    padding-left: 20px;
    padding-right: 20px;

    .title {
      white-space: normal;
      font-size: 18px;
      color: black;
      margin: 10px 0 10px 0;
      line-height: 1.2;
      font-weight: bold;
      text-align: left;
    }
    .time {
      font-size: 12px;
      color: #2179cc;
      margin-bottom: 10px;
    }
  }
  .button {
    height: 34px;
    line-height: 34px;
  }

  a {
    touch-action: none;
  }
}

#racelist .content {
  padding-bottom: 0;
}

#race html,
#app body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#racelist .selection .flex-demo {
  overflow: hidden;
}

.flex-demo {
  text-align: center;
  //overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#racelist .weui-media-box_appmsg .weui-media-box__hd {
  width: 70px;
  height: 70px;
}

#racelist .status {
  position: absolute;
  top: 4px;
  right: 0;
}

#racelist .vux-header .vux-header-left {
  top: 7px;
}

#racelist .vux-header-title-area {
  text-align: center;
  line-height: 40px;
  font-size: 18px;
}

#racelist .vux-header-right {
  font-size: 25px;
  display: none;
}

#racelist .footerBanner {
  display: none;
}

#racelist .weui-tab__panel {
  padding-bottom: 0;
}

#racelist ul {
  background-color: #fcf9fe;
  li {
    background-color: white;
    //margin-top: 10px;
  }
}

#racelist .selection {
  background-color: white;
  line-height: 30px;
  position: relative;
  z-index: 3;
}

#racelist .flex-demo .fa {
  vertical-align: text-top;
  padding-left: 5px;
}

#racelist .flex-demo .fa-sort-up {
  position: relative;
  top: 7px;
}

#racelist .wrapper {
  position: absolute;
  left: 0px;
  top: 40px;
  z-index: 1;
  width: 100vw;
  height: 100%;
  max-width: 850px;
}

#racelist .modal {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0.6;
  position: absolute;
  top: 0;
  z-index: 2;
}

#racelist .wrapper li {
  display: none;
  & > div > div {
    margin-top: -10px;
    margin-bottom: 10px;
  }
}

#racelist .area .vux-flexbox-item {
  text-align: center;
}

#racelist .area span {
  padding: 10px;
  line-height: 2;
  display: inline-block;
}

#racelist .data-box {
  display: flex;
  .data-left {
    flex: 1;
    text-align: center;
  }
  .data-right {
    flex: 2;
  }
}

#racelist #CircleMenu {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#racelist .vux-search-box {
  z-index: 3;
  position: relative;
}

#racelist .vux-header {
  position: relative;
  z-index: 3;
}

#racelist .wrapper {
  padding: 0;
}

#racelist .vux-1px {
  padding-top: 0;
}

#racelist .vux-header .vux-header-left .left-arrow {
  top: 0;
}

#racelist .flexwrapper .info {
  text-align: left;
  width: 100%;
  white-space: normal;
  color: #adadad;
  line-height: 1.2;
  font-size: 13px;
}

#racelist .flexwrapper .info .fa {
  position: relative;
  top: 2px;
}

#racelist .card-padding {
  padding: 0px;
}

#racelist .racelist .content-left {
  float: left;
  width: 100px;
  height: 80px;
  // background-color: red;
}

#racelist .racelist .content-right {
  // background-color: orange;
  margin-left: 100px;
}

#racelist .racelist li {
  border: 1px solid #ccc;
  margin-top: 15px;
  .header {
    position: relative;
    line-height: 30px;
    padding-left: 15px;
    border-bottom: 1px solid #ccc;
    .name {
      margin-right: 100px;
    }
  }
  .status {
    top: 0;
    position: absolute;
    right: 15px;
    font-weight: bold;
  }
  .message {
    display: inline-block;
    vertical-align: top;
    p {
      line-height: 1.5;
    }
    .weui-btn {
      // position: absolute;
      // bottom: 17px;
    }
  }
  .content {
    padding: 15px;
    position: relative;
    img {
      max-width: 90px;
      min-width: 80px;
    }
  }
}
</style>






